<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>跑马灯table</title>
	</head>
	<link rel="stylesheet" type="text/css" href="index.css" />
	<body>		
		<div id="wrap">
			<div class="head">
				<div style="width:15% ;">变电站</div>
				<div style="width: 40%;">告警信息</div>
				<div style="width: 30%;">告警时间</div>
				<div style="width:15% ;">视屏</div>
			</div>
			<div id="scroll">
				<div id="scrollwrap">
					<div class="box1">
					</div>
					<div class="box2">
					</div>
				</div>

			</div>
		</div>
	</body>
	<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var str = "";
		for (var i = 0; i < 15; i++) {
			str +=
				`<div class="line">
							<div style="width:15% ;">${i*2}</div>
							<div style="width:40%;"><a title="${i*2+'聆听灭绝的死寂吧我是亚托克斯'}">
							${i*2+'聆听灭绝的死寂吧我是亚托克斯'}</a></div>
							<div style="width:30%;">${i*2}</div>
							<div style="width:15%;"  class='mp4' val='${666}'>${i*2}</div>
						</div>`
		}
		$(".box1").html(str)
		$(".box2").html($(".box1").html())
		$(".mp4").click(function() {
			alert($(this).attr("val"))
		})
		var box1 = $(".box1")[0]
		var box2 = $(".box2")[0]
		var scroll = $('#scroll')[0]
		var speed = 16.67 //人眼帧	
		function move() {
			if (box2.offsetTop - scroll.scrollTop <= 0)
				scroll.scrollTop = 0
			else {
				scroll.scrollTop++
			}
		}

		$(function() {
			//提前悬浮的bug还是有
			var mark = setInterval(move, speed)
			wrap.onmouseenter = function() {
				clearInterval(mark)
			}
			wrap.onmouseleave = function() {
				clearInterval(mark)
				mark = setInterval(move, speed)
			}
		})
		
		var y = new Date().getFullYear()
		var m = new Date().getMonth() + 1
		var d = new Date().getDate()
		m = m < 10 ? '0' + m : m,
		d = d < 10 ? '0' + d : d		
	</script>
</html>
